<!--
 * $Description: 依赖svg-sprite-loader,使用前设置icons/svg加载，并在原本加载svg设置上排除icons/svg
 * $Author: Betway
 * @最后编辑: Betway
 * $Date: 2020年06月08日 11:27:50 +0800
 * @最后修改时间: 2020-07-10 10:46:37
 * @FilePath: /mrc_ess_web_fronted/src/components/MRC_ESS_SvgIcon.vue
-->
<template>
  <svg
    :width="size || width"
    :height="size || height"
    :fill="fill"
    :class="svgClass"
    aria-hidden="true"
  >
    <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: 'MrcSvgIcon',
  props: {
    width: { default: 18, type: [String, Number] },
    height: { default: 18, type: [String, Number] },
    size: { type: [String, Number] },
    fill: { default: 'currentColor', type: String },
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: 'service',
    },
  },
  mounted() {
    console.log(this.fill)
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
  },
}
</script>
<style scoped>
.svg-icon {
  vertical-align: -0.15em;
  overflow: hidden;
}
</style>
